<template>
    <div :class="['boxs', {_show: show}]" @click.self="hidelog" @keyup.esc="hidelog">
        <div class="auth-box_" v-loading="loading">
            <div class="auth-body_" :style="`width:${scalwidth}px; height: ${scalheight}px;`">
                <img :src="canvasbg" alt="" class="imgbg" ref="imgbg" :style="`width: ${scalwidth}px;`">
                <img :src="concaveurl" alt="" class="concave" ref="imgcanvas" :style="`top:${canvastop}px;width: ${canvaswidth}px;transform:translateX(${styleWidth - 40 - (canvaswidth - 40) * ((styleWidth -40) / (scalwidth - 40))}px)`" v-loading="loading">
                <div :class="['info-box_', {fail: infoBoxFail, show: infoBoxShow}]">{{infoText}}</div>
                <div class="el-icon-refresh reset_" @click.stop="getimgFun"></div>
            </div>
            <div class="auth-control_">
                <div class="range-box" style="height: 30px;" ref="progress">
                    <div class="range-text">拖动滑块完成拼图</div>
                    <div class="range-slider" ref="slider" @mousedown.stop="onCloseMouseDown($event)" :style="`width:${styleWidth}px`">
                        <div :class="['range-btn', { isDown: mouseDown }]"><div></div><div></div><div></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components:{
            
		},
        props: {
            show: { type: Boolean, default: false },
        },
        data() {
            return {
                canvasbg: '',
                concaveurl: '',
                concavetop: '',
                codekey: '',

                mouseDown: false, // 鼠标是否在按钮上按下
                startWidth: 40, // 鼠标点下去时父级的width
                startX: 0, // 鼠标按下时的X
                newX: 0, // 鼠标当前的偏移X

                imgwidth: '', //图片bg原始宽度
                imgheight: '', //图片bg原始高度

                imgcanvaswidth: '',
                imgcanvasheight: '',

                infoBoxFail: false,
                infoBoxShow: false,
                infoText: '',

                loading: false,

                scalwidth: 400,
                scalheight: 180,
                timer: null
            }
        },
        watch: {
            show(newsdata){
                if(newsdata){
                    this.getimgFun()
                    this.timer = setInterval(()=>{
                        this.getimgFun()
                    },15000)
                } else {
                    this.startWidth = 0
                    this.startX = 0
                    this.newX = 0
                    this.infoBoxShow = false
                }
            }
        },
        beforeUnmount() {
            clearInterval(this.timer) 
        },
        mounted() {
            this.getimgFun()
            document.addEventListener("mousemove", this.onRangeMouseMove, false);
            document.addEventListener("mouseup", this.onRangeMouseUp, false);
            this.$nextTick(()=>{
                document.addEventListener('keyup',(e)=>{
                    if(e.keyCode==27){
                        this.hidelog()  //事件名
                    }
                })
            })
        },
        computed: {
            styleWidth() {
                const w = this.startWidth + this.newX - this.startX;
                return w < 40 ? 40 : w > this.scalwidth ? this.scalwidth : w;
            },
            canvaswidth(){
                return this.scalwidth / this.imgwidth * this.imgcanvaswidth
            },
            canvastop(){
                return this.imgScaleheight / this.imgheight * this.concavetop
            }
        },
        methods: {
            async getimgFun (){
                this.loading = true
                var res = await this.$API.auth.imgcode.get()
                this.loading = false
				if(res.error === 0){
                    this.infoBoxShow = false
                    this.infoBoxFail = false
                    this.infoText = ''
					this.canvasbg = res.data.background
                    this.concaveurl = res.data.concave
                    this.concavetop = res.data.concaveHeight
                    this.codekey = res.data.key
                    this.$nextTick(()=>{
                        
                        this.imgwidth = this.$refs['imgbg'].naturalWidth
                        this.imgheight = this.$refs['imgbg'].naturalHeight

                        this.imgScalewidth = this.$refs['imgbg'].width
                        this.imgScaleheight = this.$refs['imgbg'].height

                        this.imgcanvaswidth = this.$refs['imgcanvas'].naturalWidth
                        this.imgcanvasheight = this.$refs['imgcanvas'].naturalHeight
                    })
				} else{
                    this.infoBoxShow = false
                    this.infoBoxFail = false
                    this.infoText = ''
                }
            },
            // 鼠标按下
            onCloseMouseDown(e){
                this.mouseDown = true
                this.startWidth = this.$refs["slider"].clientWidth
                this.newX = e.clientX || e.changedTouches[0].clientX
                this.startX = e.clientX || e.changedTouches[0].clientX
            },
            // 鼠标移动
            onRangeMouseMove(e){
                if (this.mouseDown) {
                    e.preventDefault();
                    this.newX = e.clientX || e.changedTouches[0].clientX;
                }
            },
            // 鼠标抬起
            onRangeMouseUp() {
                if (this.mouseDown) {
                    this.mouseDown = false;
                    this.submit();
                }
            },
            async submit(){
                let poinx = this.styleWidth - 40 - (this.canvaswidth - 40) * ((this.styleWidth -40) / (this.scalwidth - 40))
                let obj = {
					captchaKey: this.codekey,
					captchaX: poinx / this.scalwidth * this.imgwidth
				}
                var res = await this.$API.auth.imgcodeverify.get(obj)
                this.infoBoxShow = true
                if(res.error === 0){
                    this.infoBoxFail = false
                    this.infoText = '验证成功！'
                    clearInterval(this.timer) 
                    this.$emit('onSubmit', obj)
                } else{
                    this.infoBoxFail = true
                    this.startWidth = 0
                    this.startX = 0
                    this.newX = 0
                    this.infoText = '验证失败，请重试'
                }
            },
            hidelog(){
                clearInterval(this.timer) 
                this.$emit('onClose')
            }
        },
    }
</script>

<style scoped>
.boxs{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.boxs._show{
    opacity: 1;
    pointer-events: auto;
}
.auth-box_{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 12px;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.auth-box_ .auth-body_ {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}
.auth-box_ .auth-body_ .imgbg{
    /* width: 400px; */
}
.auth-box_ .auth-body_ .info-box_ {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    line-height: 24px;
    text-align: center;
    overflow: hidden;
    font-size: 13px;
    background-color: #83ce3f;
    opacity: 0;
    transform: translateY(24px);
    transition: all .2s;
    color: #fff;
    z-index: 10;
}
.auth-box_ .auth-body_ .info-box_.fail {
    background-color: #ce594b;
}
.auth-box_ .auth-body_ .info-box_.show {
    opacity: .95;
    transform: translateY(0);
}
.concave{
    position: absolute;
    left: 0;
    top: 0;
}
.auth-box_ .auth-control_ .range-box {
    position: relative;
    width: 100%;
    background-color: #eef1f8;
    margin-top: 12px;
    border-radius: 3px;
    box-shadow: inset 0 0 8px hsla(0,0%,94.1%,.6);
}
.auth-box_ .auth-control_ .range-box .range-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    color: #b7bcd1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
}
.auth-box_ .auth-control_ .range-box .range-slider {
    position: absolute;
    height: 100%;
    width: 50px;
    background-color: rgba(106,160,255,.8);
    border-radius: 3px;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    width: 40px;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 4px #ccc;
    cursor: pointer;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn>div {
    width: 0;
    height: 40%;
    transition: all .2s;
    border: 1px solid #6aa0ff;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn>div:nth-child(2) {
    margin: 0 4px;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn.isDown>div:first-child, .auth-box_ .auth-control_ .range-box .range-slider .range-btn:hover>div:first-child {
    border: 4px solid transparent;
    height: 0;
    border-right-color: #6aa0ff;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn.isDown>div:nth-child(2), .auth-box_ .auth-control_ .range-box .range-slider .range-btn:hover>div:nth-child(2) {
    border-width: 3px;
    height: 0;
    border-radius: 3px;
    margin: 0 6px;
    border-right-color: #6aa0ff;
}
.auth-box_ .auth-control_ .range-box .range-slider .range-btn.isDown>div:nth-child(3), .auth-box_ .auth-control_ .range-box .range-slider .range-btn:hover>div:nth-child(3) {
    border: 4px solid transparent;
    height: 0;
    border-left-color: #6aa0ff;
}
.auth-box_ .auth-body_ .reset_ {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 32px;
    z-index: 12;
    font-weight: bold;
    color: #0d84ff;
    cursor: pointer;
    transition: transform .3s;
    transform: rotate(0deg);
}
.auth-box_ .auth-body_ .reset_:hover {
    transform: rotate(-180deg);
}
</style>